<template>
	<Appearance :item="item">
		<view class="diy-navBar">
		  <view class="data-list">
		    <view class="item-nav" v-for="(dataItem, index) in item.data" :key="index">
		      <view class="nav-to" @click="onLink(dataItem.link)">
		        <image class="item-image" mode="widthFix" :src="dataItem.imgUrl"></image>
		        <view class="item-text oneline-hide">{{ dataItem.text }}</view>
		      </view>
		    </view>
		  </view>
		</view>
	</Appearance>
</template>

<script>
	import mixin from "../mixin"
	export default {
		name: 'NavBar',
		mixins: [mixin],
	}
</script>

<style lang="scss" scoped>
	.diy-navBar {
		padding: 100rpx 32rpx 32rpx;
		border-radius: 24rpx;
		background: url("/static/imgs/AusleseNavBar1.png") #ffffff top center no-repeat;
		background-size: 100% auto;
		box-sizing: border-box;
	}
	.data-list {
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
		.item-nav {
			width: calc(25% - 18rpx);
			text-align: center;
		}
		.item-image {
			width: 88rpx;
			height: 88rpx;
		}
	}
</style>